<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>论坛筛选 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4A6FFF;
      --primary-light: #E8F0FF;
      --success: #34C759;
      --warning: #FF9500;
      --danger: #FF3B30;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --border-light: #E5E6EB;
      --bg-white: #FFFFFF;
      --bg-light: #F2F3F5;
      --gray-100: #F7F8FA;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      padding-bottom: 60px;
      margin: 0;
    }
    
    /* 顶部导航 */
    .page-header {
      background-color: var(--bg-white);
      padding: 15px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 20px;
    }
    
    /* 搜索区域 */
    .search-container {
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 16px 12px 45px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      background-color: var(--gray-100);
      font-size: 14px;
      outline: none;
    }
    
    .search-input:focus {
      border-color: var(--primary);
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }
    
    /* 筛选工具栏 */
    .filter-toolbar {
      background-color: var(--bg-white);
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 14px;
      padding: 5px 10px;
      border-radius: 6px;
    }
    
    .filter-btn.active {
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .view-toggle {
      display: flex;
      gap: 5px;
    }
    
    .view-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      border: 1px solid var(--border-light);
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
    }
    
    .view-btn.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    /* 筛选面板 */
    .filter-panel {
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      padding: 15px 16px;
      display: none;
    }
    
    .filter-panel.active {
      display: block;
    }
    
    .filter-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
    }
    
    .filter-close {
      color: var(--text-secondary);
      background: none;
      border: none;
      font-size: 16px;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .filter-option {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      border: 1px solid var(--border-light);
      background-color: white;
      color: var(--text-primary);
    }
    
    .filter-option.active {
      background-color: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    .filter-actions {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    
    .filter-action-btn {
      flex: 1;
      padding: 8px 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      border: none;
    }
    
    .reset-btn {
      background-color: var(--gray-100);
      color: var(--text-secondary);
    }
    
    .apply-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 论坛列表 - 卡片视图 */
    .forum-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 12px 16px;
    }
    
    .forum-card {
      background-color: var(--bg-white);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--border-light);
      text-decoration: none;
      color: var(--text-primary);
    }
    
    .forum-card-header {
      height: 60px;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
      position: relative;
    }
    
    .forum-card-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 20px;
      position: absolute;
      bottom: -20px;
      left: 15px;
    }
    
    .forum-card-body {
      padding: 25px 15px 15px;
    }
    
    .forum-card-name {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .forum-card-desc {
      font-size: 12px;
      color: var(--text-secondary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8px;
    }
    
    .forum-card-meta {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--text-secondary);
    }
    
    /* 论坛列表 - 列表视图 */
    .forum-list {
      display: none;
    }
    
    .forum-list.active {
      display: block;
    }
    
    .forum-list-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
      text-decoration: none;
      color: var(--text-primary);
    }
    
    .forum-list-icon {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      margin-right: 12px;
    }
    
    .forum-list-info {
      flex: 1;
      min-width: 0;
    }
    
    .forum-list-name {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .forum-list-tag {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 4px;
      background-color: var(--primary-light);
      color: var(--primary);
    }
    
    .forum-list-desc {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 5px;
    }
    
    .forum-list-stats {
      display: flex;
      gap: 15px;
      font-size: 11px;
      color: var(--text-secondary);
    }
    
    .forum-list-join {
      padding: 6px 12px;
      border-radius: 6px;
      background-color: var(--primary);
      color: white;
      font-size: 13px;
      border: none;
      white-space: nowrap;
    }
    
    .forum-list-join.joined {
      background-color: var(--gray-100);
      color: var(--text-secondary);
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 筛选结果计数 */
    .results-count {
      padding: 10px 16px;
      font-size: 14px;
      color: var(--text-secondary);
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="page-header">
    <button class="header-btn" id="backBtn">
      <i class="fa fa-arrow-left"></i>
    </button>
    <div class="header-title">所有论坛</div>
    <button class="header-btn" id="sortBtn">
      <i class="fa fa-sort"></i>
    </button>
  </div>
  
  <!-- 搜索区域 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索论坛名称或描述...">
    </div>
  </div>
  
  <!-- 筛选工具栏 -->
  <div class="filter-toolbar">
    <button class="filter-btn active" id="categoryFilter">
      <i class="fa fa-th-large"></i>
      <span>分类</span>
    </button>
    <button class="filter-btn" id="activityFilter">
      <i class="fa fa-bolt"></i>
      <span>活跃度</span>
    </button>
    <button class="filter-btn" id="memberFilter">
      <i class="fa fa-users"></i>
      <span>成员数</span>
    </button>
    <div class="view-toggle">
      <button class="view-btn active" id="cardViewBtn">
        <i class="fa fa-th"></i>
      </button>
      <button class="view-btn" id="listViewBtn">
        <i class="fa fa-list"></i>
      </button>
    </div>
  </div>
  
  <!-- 分类筛选面板 -->
  <div class="filter-panel active" id="categoryPanel">
    <div class="filter-title">
      <span>论坛分类</span>
      <button class="filter-close" id="categoryClose">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="filter-options">
      <button class="filter-option active">全部</button>
      <button class="filter-option">摄影</button>
      <button class="filter-option">旅行</button>
      <button class="filter-option">美食</button>
      <button class="filter-option">读书</button>
      <button class="filter-option">科技</button>
      <button class="filter-option">音乐</button>
      <button class="filter-option">电影</button>
      <button class="filter-option">游戏</button>
      <button class="filter-option">健身</button>
      <button class="filter-option">时尚</button>
      <button class="filter-option">职场</button>
    </div>
    <div class="filter-actions">
      <button class="filter-action-btn reset-btn">重置</button>
      <button class="filter-action-btn apply-btn">确定</button>
    </div>
  </div>
  
  <!-- 活跃度筛选面板 -->
  <div class="filter-panel" id="activityPanel">
    <div class="filter-title">
      <span>活跃度</span>
      <button class="filter-close" id="activityClose">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="filter-options">
      <button class="filter-option active">全部</button>
      <button class="filter-option">非常活跃</button>
      <button class="filter-option">较活跃</button>
      <button class="filter-option">一般</button>
      <button class="filter-option">较少</button>
    </div>
    <div class="filter-actions">
      <button class="filter-action-btn reset-btn">重置</button>
      <button class="filter-action-btn apply-btn">确定</button>
    </div>
  </div>
  
  <!-- 成员数筛选面板 -->
  <div class="filter-panel" id="memberPanel">
    <div class="filter-title">
      <span>成员数量</span>
      <button class="filter-close" id="memberClose">
        <i class="fa fa-times"></i>
      </button>
    </div>
    <div class="filter-options">
      <button class="filter-option active">全部</button>
      <button class="filter-option">10万+</button>
      <button class="filter-option">1万-10万</button>
      <button class="filter-option">1千-1万</button>
      <button class="filter-option">1千以下</button>
    </div>
    <div class="filter-actions">
      <button class="filter-action-btn reset-btn">重置</button>
      <button class="filter-action-btn apply-btn">确定</button>
    </div>
  </div>
  
  <!-- 筛选结果计数 -->
  <div class="results-count">
    找到 24 个论坛
  </div>
  
  <!-- 论坛列表 - 卡片视图 -->
  <div class="forum-cards" id="cardView">
    <!-- 论坛卡片1 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #FFE5E5 0%, #FF3B30 100%);">
        <div class="forum-card-icon" style="color: #FF3B30;">
          <i class="fa fa-camera"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">摄影爱好者</div>
        <div class="forum-card-desc">分享摄影技巧、作品和器材体验的社区</div>
        <div class="forum-card-meta">
          <span>24.5k 成员</span>
          <span>非常活跃</span>
        </div>
      </div>
    </a>
    
    <!-- 论坛卡片2 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #E6F7FF 0%, #1890FF 100%);">
        <div class="forum-card-icon" style="color: #1890FF;">
          <i class="fa fa-plane"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">旅行日记</div>
        <div class="forum-card-desc">记录旅途中的风景、故事和攻略分享</div>
        <div class="forum-card-meta">
          <span>31.2k 成员</span>
          <span>非常活跃</span>
        </div>
      </div>
    </a>
    
    <!-- 论坛卡片3 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #FFF7E6 0%, #FAAD14 100%);">
        <div class="forum-card-icon" style="color: #FAAD14;">
          <i class="fa fa-cutlery"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">美食探店</div>
        <div class="forum-card-desc">发现各地美食，分享烹饪技巧和餐厅体验</div>
        <div class="forum-card-meta">
          <span>42.8k 成员</span>
          <span>非常活跃</span>
        </div>
      </div>
    </a>
    
    <!-- 论坛卡片4 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #E6FFFA 0%, #36CFC9 100%);">
        <div class="forum-card-icon" style="color: #36CFC9;">
          <i class="fa fa-book"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">读书俱乐部</div>
        <div class="forum-card-desc">分享阅读心得，推荐好书，讨论书中观点</div>
        <div class="forum-card-meta">
          <span>18.7k 成员</span>
          <span>较活跃</span>
        </div>
      </div>
    </a>
    
    <!-- 论坛卡片5 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #F6FFED 0%, #52C41A 100%);">
        <div class="forum-card-icon" style="color: #52C41A;">
          <i class="fa fa-code"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">编程技术分享</div>
        <div class="forum-card-desc">交流编程经验，分享技术文章和项目心得</div>
        <div class="forum-card-meta">
          <span>29.3k 成员</span>
          <span>非常活跃</span>
        </div>
      </div>
    </a>
    
    <!-- 论坛卡片6 -->
    <a href="#" class="forum-card">
      <div class="forum-card-header" style="background: linear-gradient(135deg, #FFF0F6 0%, #EB2F96 100%);">
        <div class="forum-card-icon" style="color: #EB2F96;">
          <i class="fa fa-music"></i>
        </div>
      </div>
      <div class="forum-card-body">
        <div class="forum-card-name">音乐爱好者</div>
        <div class="forum-card-desc">分享好音乐，讨论音乐风格和乐器演奏</div>
        <div class="forum-card-meta">
          <span>15.6k 成员</span>
          <span>较活跃</span>
        </div>
      </div>
    </a>
  </div>
  
  <!-- 论坛列表 - 列表视图 -->
  <div class="forum-list" id="listView">
    <!-- 论坛列表项1 -->
    <a href="#" class="forum-list-item">
      <div class="forum-list-icon" style="background-color: #FF3B30;">
        <i class="fa fa-camera"></i>
      </div>
      <div class="forum-list-info">
        <div class="forum-list-name">
          摄影爱好者
          <span class="forum-list-tag">摄影</span>
        </div>
        <div class="forum-list-desc">分享摄影技巧、作品和器材体验的社区</div>
        <div class="forum-list-stats">
          <span><i class="fa fa-users"></i> 24.5k</span>
          <span><i class="fa fa-bolt"></i> 非常活跃</span>
        </div>
      </div>
      <button class="forum-list-join">加入</button>
    </a>
    
    <!-- 论坛列表项2 -->
    <a href="#" class="forum-list-item">
      <div class="forum-list-icon" style="background-color: #1890FF;">
        <i class="fa fa-plane"></i>
      </div>
      <div class="forum-list-info">
        <div class="forum-list-name">
          旅行日记
          <span class="forum-list-tag">旅行</span>
        </div>
        <div class="forum-list-desc">记录旅途中的风景、故事和攻略分享</div>
        <div class="forum-list-stats">
          <span><i class="fa fa-users"></i> 31.2k</span>
          <span><i class="fa fa-bolt"></i> 非常活跃</span>
        </div>
      </div>
      <button class="forum-list-join joined">已加入</button>
    </a>
    
    <!-- 论坛列表项3 -->
    <a href="#" class="forum-list-item">
      <div class="forum-list-icon" style="background-color: #FAAD14;">
        <i class="fa fa-cutlery"></i>
      </div>
      <div class="forum-list-info">
        <div class="forum-list-name">
          美食探店
          <span class="forum-list-tag">美食</span>
        </div>
        <div class="forum-list-desc">发现各地美食，分享烹饪技巧和餐厅体验</div>
        <div class="forum-list-stats">
          <span><i class="fa fa-users"></i> 42.8k</span>
          <span><i class="fa fa-bolt"></i> 非常活跃</span>
        </div>
      </div>
      <button class="forum-list-join">加入</button>
    </a>
    
    <!-- 论坛列表项4 -->
    <a href="#" class="forum-list-item">
      <div class="forum-list-icon" style="background-color: #36CFC9;">
        <i class="fa fa-book"></i>
      </div>
      <div class="forum-list-info">
        <div class="forum-list-name">
          读书俱乐部
          <span class="forum-list-tag">读书</span>
        </div>
        <div class="forum-list-desc">分享阅读心得，推荐好书，讨论书中观点</div>
        <div class="forum-list-stats">
          <span><i class="fa fa-users"></i> 18.7k</span>
          <span><i class="fa fa-bolt"></i> 较活跃</span>
        </div>
      </div>
      <button class="forum-list-join">加入</button>
    </a>
    
    <!-- 论坛列表项5 -->
    <a href="#" class="forum-list-item">
      <div class="forum-list-icon" style="background-color: #52C41A;">
        <i class="fa fa-code"></i>
      </div>
      <div class="forum-list-info">
        <div class="forum-list-name">
          编程技术分享
          <span class="forum-list-tag">科技</span>
        </div>
        <div class="forum-list-desc">交流编程经验，分享技术文章和项目心得</div>
        <div class="forum-list-stats">
          <span><i class="fa fa-users"></i> 29.3k</span>
          <span><i class="fa fa-bolt"></i> 非常活跃</span>
        </div>
      </div>
      <button class="forum-list-join">加入</button>
    </a>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-th-large nav-icon"></i>
      <span>论坛</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-bell-o nav-icon"></i>
      <span>通知</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选面板切换
    const categoryFilter = document.getElementById('categoryFilter');
    const activityFilter = document.getElementById('activityFilter');
    const memberFilter = document.getElementById('memberFilter');
    
    const categoryPanel = document.getElementById('categoryPanel');
    const activityPanel = document.getElementById('activityPanel');
    const memberPanel = document.getElementById('memberPanel');
    
    // 关闭按钮
    const categoryClose = document.getElementById('categoryClose');
    const activityClose = document.getElementById('activityClose');
    const memberClose = document.getElementById('memberClose');
    
    // 筛选按钮点击事件
    categoryFilter.addEventListener('click', function() {
      showPanel(categoryPanel);
    });
    
    activityFilter.addEventListener('click', function() {
      showPanel(activityPanel);
    });
    
    memberFilter.addEventListener('click', function() {
      showPanel(memberPanel);
    });
    
    // 关闭按钮点击事件
    categoryClose.addEventListener('click', function() {
      hidePanel(categoryPanel);
    });
    
    activityClose.addEventListener('click', function() {
      hidePanel(activityPanel);
    });
    
    memberClose.addEventListener('click', function() {
      hidePanel(memberPanel);
    });
    
    // 显示筛选面板
    function showPanel(panel) {
      // 隐藏所有面板
      document.querySelectorAll('.filter-panel').forEach(p => {
        p.classList.remove('active');
      });
      
      // 移除所有筛选按钮的活跃状态
      document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      
      // 显示目标面板并激活对应按钮
      panel.classList.add('active');
      
      if (panel === categoryPanel) {
        categoryFilter.classList.add('active');
      } else if (panel === activityPanel) {
        activityFilter.classList.add('active');
      } else if (panel === memberPanel) {
        memberFilter.classList.add('active');
      }
    }
    
    // 隐藏筛选面板
    function hidePanel(panel) {
      panel.classList.remove('active');
    }
    
    // 筛选选项点击事件
    document.querySelectorAll('.filter-option').forEach(option => {
      option.addEventListener('click', function() {
        // 在同一面板中，只能选择一个选项
        const parent = this.parentElement;
        parent.querySelectorAll('.filter-option').forEach(opt => {
          opt.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 视图切换
    const cardViewBtn = document.getElementById('cardViewBtn');
    const listViewBtn = document.getElementById('listViewBtn');
    const cardView = document.getElementById('cardView');
    const listView = document.getElementById('listView');
    
    cardViewBtn.addEventListener('click', function() {
      cardViewBtn.classList.add('active');
      listViewBtn.classList.remove('active');
      cardView.style.display = 'grid';
      listView.classList.remove('active');
    });
    
    listViewBtn.addEventListener('click', function() {
      listViewBtn.classList.add('active');
      cardViewBtn.classList.remove('active');
      cardView.style.display = 'none';
      listView.classList.add('active');
    });
    
    // 加入按钮点击事件
    document.querySelectorAll('.forum-list-join').forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        if (this.classList.contains('joined')) {
          this.classList.remove('joined');
          this.textContent = '加入';
        } else {
          this.classList.add('joined');
          this.textContent = '已加入';
        }
      });
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      const searchTerm = this.value.toLowerCase().trim();
      // 这里可以添加实际搜索逻辑
      console.log('搜索:', searchTerm);
    });
    
    // 排序按钮
    document.getElementById('sortBtn').addEventListener('click', function() {
      alert('排序选项：按推荐、按最新、按成员数、按活跃度');
    });
    
    // 返回按钮
    document.getElementById('backBtn').addEventListener('click', function() {
      history.back();
    });
    
    // 底部导航交互
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(nav => {
          nav.classList.remove('active');
        });
        this.classList.add('active');
      });
    });
    
    // 筛选应用按钮
    document.querySelectorAll('.apply-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 获取当前活跃的面板
        const activePanel = document.querySelector('.filter-panel.active');
        if (activePanel) {
          hidePanel(activePanel);
          // 这里可以添加应用筛选条件的逻辑
          alert('筛选条件已应用');
        }
      });
    });
    
    // 筛选重置按钮
    document.querySelectorAll('.reset-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 重置当前面板的选项
        const panel = this.closest('.filter-panel');
        panel.querySelectorAll('.filter-option').forEach(option => {
          option.classList.remove('active');
        });
        panel.querySelector('.filter-option:first-child').classList.add('active');
      });
    });
  </script>
</body>
</html>
